import TodoItem from "./TodoItem"

const TodoList =(props )=>{
    const{
        todos,
        onToggle,
        onDelete
    } = props
    return(
        <>
        <ul className="todo-list">
        {
            todos.length>0?(
                todos.map((todo)=><TodoItem key={todo.id} todos={todo} 
                onToggle={()=>onToggle(todo.id)}
                onDelete={()=>onDelete(todo.id)}
                ></TodoItem>)
            ):(
                <p>暂无待办</p>
            )
        }
        </ul>
        </>
    )
}
export default TodoList